﻿﻿﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <html>

    <head>
      <link rel="stylesheet" href="${ctx}/common/common.css" />
      <title>Title</title>
      <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
      <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
      <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

      <style>
        .layui-body {
          overflow-y: scroll;
        }
      </style>
    </head>

    <body>
      <!--主体内容层-->
      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12 layui-col-space15 layui-form">
            <form>
              <!--输入框内容盒子-->
              <div class="layui-col-md12">
                <div class="layui-col-md4">
                  <label class="layui-form-label">起止时间</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" id="worksheetTime" readonly placeholder="请选择起止时间"
                      class="layui-input" />
                  </div>
                </div>
                <div class="layui-col-md4">
                  <label class="layui-form-label">行政区域</label>
                  <div class="layui-input-block">
                    <div class="area-select-container" style="position: relative; width: 100%">
                      <div id="areaDiv" style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      ">
                        <span style="color: #999; margin-left: 10px">请选择行政区域</span>
                      </div>
                      <i class="layui-icon layui-icon-down" style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      " id="areaArrow"></i>
                      <i class="layui-icon layui-icon-close" style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      " id="areaClear" title="清空选择"></i>
                      <input type="hidden" id="area" name="area" />
                      <div class="areaTreeshow" style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      ">
                        <ul id="areaTree"></ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md4">
                  <label class="layui-form-label">产品类型</label>
                  <div class="layui-input-block">
                    <div class="mtype-select-container" style="position: relative; width: 100%">
                      <div id="mTypeDiv" style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      ">
                        <span style="color: #999; margin-left: 10px">请选择产品类型</span>
                      </div>
                      <i class="layui-icon layui-icon-down" style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      " id="mTypeArrow"></i>
                      <i class="layui-icon layui-icon-close" style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      " id="mTypeClear" title="清空选择"></i>
                      <input type="hidden" id="mType" name="mType" />
                      <div class="mTypeTreeshow" style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      ">
                        <ul id="mTypeTree"></ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12" style="margin-top: 5px">
                <!--输入框-->
                <div class="layui-col-md4">
                  <div class="layui-input-block">
                    <input type="hidden" id="productionCompanyId" />
                    <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                    <span style="color: red; overflow-x: hidden" id="companyName"></span>
                  </div>
                </div>
              </div>

              <!--通用按钮盒子-->
              <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
                <div style="float: right" class="layui-btn-group paramBtn">
                  <button id="reloadDetection" type="button" class="layui-btn layui-btn-sm layui-btn-danger">查询</button>
                  <button id="resetDetection" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">重置</button>
                </div>
              </div>
            </form>
            <!--通用按钮盒子-->

            <table class="layui-table"
              lay-data="{ url:'${ctx}/productionDetection/detectionListPage', page:true,groups:5,id:'demo1' }"
              lay-filter="demo1">
              <thead>
                <tr>
                  <th lay-data="{field:'workCode',sort:true}">加工单编号</th>
                  <th lay-data="{field:'enterpriseName',sort:true}">生产企业</th>
                  <th lay-data="{field:'batchCode',sort:true}">生产批次</th>
                  <th lay-data="{field:'name',sort:true}">产品名称</th>
                  <th lay-data="{field:'pro_cla_name',sort:true}">产品类型</th>
                  <!-- <th lay-data="{field:'perfStandard',sort:true}">产品标准号</th> -->
                  <th lay-data="{field:'specifications',sort:true}">规格/单位</th>
                  <th lay-data="{field:'p_date',sort:true}">生产日期</th>
                  <th lay-data="{field:'chejian',sort:true}">生产车间</th>
                  <th lay-data="{field:'shengchanxian',sort:true}">生产产线</th>
                  <!--  <th lay-data="{field:'create_time',sort:true}">创建日期</th> -->
                  <th lay-data="{field:'right',toolbar:'#barDemo',width:350}">操作</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
      <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="pickingRecord">领料记录</a>
      {{# if(d.type == 1){ }}
      <a class="layui-btn layui-btn-xs" lay-event="technologicalProcess">工艺流程</a>
      {{# } }}
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="inspectionReport">检验报告</a>
    </script>
    </body>
    <script>
      var $ = layui.$;

      layui.use(['tree', 'layer', 'table'], function () {


      })
      layui.use(['tree', 'layer', 'table'], function () {
        var $ = layui.$;
        var loading = layer.msg("数据加载中...");
        var table1 = layui.table;
        table1.render({
          done: function () {
            layer.close(loading);
          }
        })
        //监听filter为demo的table中的工具条
        table1.on('tool(demo1)', function (obj) {
          var data = obj.data;
          console.log(data)
          if (obj.event === 'pickingRecord') {//领料记录
            window.location.href = "${ctx}/productionDetection/pickingRecord?workId=" + data.id
          } else if (obj.event === 'technologicalProcess') {//工艺流程
            window.location.href = "${ctx}/productionDetection/technological?workId=" + data.id
          } else if (obj.event === 'inspectionReport') {//检验报告
            window.location.href = "${ctx}/productionDetection/inspectionReport?workId=" + data.id
          } else if (obj.event === 'detail') {//查看
            window.location.href = "${ctx}/productionDetection/detectionDetail?worksheetId=" + data.id
          }
        });

        /* 产品类型树 */
        $('.mtype-select-container').click(function (e) {
          e.stopPropagation(); // 阻止事件冒泡
          if ($(".mTypeTreeshow").is(":hidden")) {
            $('.mTypeTreeshow').fadeIn();
            $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(180deg)');
          } else {
            $('.mTypeTreeshow').fadeOut();
            $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          }
        });

        // 单独为箭头添加点击事件，确保箭头点击有效
        $('#mTypeArrow').click(function (e) {
          e.stopPropagation();
          e.preventDefault();
          if ($(".mTypeTreeshow").is(":hidden")) {
            $('.mTypeTreeshow').fadeIn();
            $(this).css('transform', 'translateY(-50%) rotate(180deg)');
          } else {
            $('.mTypeTreeshow').fadeOut();
            $(this).css('transform', 'translateY(-50%) rotate(0deg)');
          }
        });

        // 清空按钮点击事件
        $('#mTypeClear').click(function (e) {
          e.stopPropagation();
          e.preventDefault();
          // 清空选择
          $("#mType").val('');
          $("#mTypeDiv").html('<span style="color: #999;margin-left:10px;">请选择产品类型</span>');
          $('.mTypeTreeshow').fadeOut();
          $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          $(this).hide(); // 隐藏清空按钮
        });

        layui.tree({
          elem: '#mTypeTree',
          nodes: ${ mJson },
          click: function (node) {
            $("#mType").val(node.id);
            $("#mTypeDiv").html('<span style="color: #333;margin-left:10px;">' + node.name + '</span>');
            $(".mTypeTreeshow").fadeOut();
            $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $('#mTypeClear').show(); // 显示清空按钮
          }
        });

      /* 行政区域树 */
      $('.area-select-container').click(function (e) {
        e.stopPropagation(); // 阻止事件冒泡
        if ($(".areaTreeshow").is(":hidden")) {
          $('.areaTreeshow').fadeIn();
          $('#areaArrow').css('transform', 'translateY(-50%) rotate(180deg)');
        } else {
          $('.areaTreeshow').fadeOut();
          $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        }
      });

      // 单独为箭头添加点击事件，确保箭头点击有效
      $('#areaArrow').click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        if ($(".areaTreeshow").is(":hidden")) {
          $('.areaTreeshow').fadeIn();
          $(this).css('transform', 'translateY(-50%) rotate(180deg)');
        } else {
          $('.areaTreeshow').fadeOut();
          $(this).css('transform', 'translateY(-50%) rotate(0deg)');
        }
      });

      // 清空按钮点击事件
      $('#areaClear').click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        // 清空选择
        $("#area").val('');
        $("#areaDiv").html('<span style="color: #999;margin-left:10px;">请选择行政区域</span>');
        $('.areaTreeshow').fadeOut();
        $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        $(this).hide(); // 隐藏清空按钮
      });

      layui.tree({
        elem: '#areaTree',
        nodes: ${ areaTree },
        click: function (node) {
          $("#area").val(node.id);
          $("#areaDiv").html('<span style="color: #333;margin-left:10px;">' + node.name + '</span>');
          $(".areaTreeshow").fadeOut();
          $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          $('#areaClear').show(); // 显示清空按钮
        }
        });

      // 点击其他地方关闭下拉框
      $(document).click(function (e) {
        // 检查点击是否在下拉框容器内，包括树形结构
        if (!$(e.target).closest('.area-select-container').length &&
          !$(e.target).closest('.areaTreeshow').length) {
          $('.areaTreeshow').fadeOut();
          $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        }
        if (!$(e.target).closest('.mtype-select-container').length &&
          !$(e.target).closest('.mTypeTreeshow').length) {
          $('.mTypeTreeshow').fadeOut();
          $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        }
      });

      // 为树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
      $('.areaTreeshow').click(function (e) {
        e.stopPropagation(); // 阻止事件冒泡到document
      });

      $('.mTypeTreeshow').click(function (e) {
        e.stopPropagation(); // 阻止事件冒泡到document
      });

      // 为树形结构内的所有元素添加点击事件处理
      $(document).on('click', '.areaTreeshow *', function (e) {
        e.stopPropagation(); // 阻止事件冒泡
      });

      $(document).on('click', '.mTypeTreeshow *', function (e) {
        e.stopPropagation(); // 阻止事件冒泡
      });
      /**
       * 条件查询中的查询按钮
       * */
      $("#reloadDetection").on("click", function () {
        //这里以搜索为例
        table1.reload('demo1', {
          where: { //设定异步数据接口的额外参数，任意设
            worksheetTime: $("#worksheetTime").val()
            , area: $("#area").val()
            , mType: $("#mType").val()
            , productionCompanyName: $("#productionCompanyId").val()
          }
          , page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      })
      /**
       * 重置条件查询
       * */
      $("#resetDetection").on("click", function () {
        $("#productionCompanyId").val("")
        $("#companyName").html("")

        // 重置产品类型
        $("#mType").val("");
        $("#mTypeDiv").html('<span style="color: #999;margin-left:10px;">请选择产品类型</span>');
        $('.mTypeTreeshow').fadeOut();
        $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        $('#mTypeClear').hide(); // 隐藏清空按钮

        // 重置行政区域
        $("#area").val("");
        $("#areaDiv").html('<span style="color: #999;margin-left:10px;">请选择行政区域</span>');
        $('.areaTreeshow').fadeOut();
        $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
        $('#areaClear').hide(); // 隐藏清空按钮

        //这里以搜索为例
        table1.reload('demo1', {
          where: { //设定异步数据接口的额外参数，任意设
            worksheetTime: ''
            , area: ''
            , mType: ''
            , productionCompanyName: ''
          }
          , page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      })

      /**
       * 点击生产企业按钮
       */
      $("#prodictionButton").on("click", function () {
        layer.open({
          type: 2,
          title: '生产企业',
          shadeClose: true,
          offset: '10px',
          shade: 0.8,
          area: ['50%', '80%'],
          content: '${ctx}/productionDetection/queryEnterpriseAll?companyIds=' + $("#productionCompanyId").val() //iframe的url
        });
      })

    });




      layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#worksheetTime'
          , range: true//指定元素
        });
      });
    </script>

    </html>